<template>
    <div id="app">
        <div class="table-wraper">
            <div class="main">
                <ul class="listTitle">
                    <li v-for='item in titleList'>{{item.label}}</li>
                </ul>
                <ul class="dataList" v-for='(item,index) in tableData'>
                    <li>{{index+1}}</li>
                    <li>{{item.nickname}}</li>
                    <li>{{item.phone}}</li>
                    <li>{{item.osname}}</li>
                    <li>{{item.osversion}}</li>
                    <li>{{item.appversion}}</li>
                    <li>{{item.network}}</li>
                    <li @click='openMsg(index)'>{{item.comment}}</li>
                    <li><span v-show='item.status == "2"' class="replyMassage" @click='showDetialMsg(index)'>{{item.status | feedBack}}</span>
                        <span v-show='item.status == "1"'>{{item.status | feedBack}}</span>
                    </li>
                    <li>{{item.createDate | formatDate}}</li>
                    <li>
                        <el-button type="info" @click='replyMsg(index)'>回复</el-button>
                    </li>
                </ul>
            </div>
            <div class="block pagination" v-show='nullContentPagination'>
                <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="10" layout="prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
            <div class="nullContent" v-show='nullContent'>暂无数据</div>
            <el-dialog title="回复内容" v-model="dialogVisible" size="tiny">
                <p><span class='replyTitle'>反馈内容 ：</span>{{msg}}</p>
                <p><span class='replyTitle'>回复内容 ：</span>
                    <el-input v-model="replyContent" placeholder="请输入内容"></el-input>
                </p>
                <span slot="footer" class="dialog-footer">
          <el-button @click="hideReply">取 消</el-button>
          <el-button type="primary" @click='doReply'>确 定</el-button>
          </span>
            </el-dialog>
            <el-dialog title="回复内容" v-model="replyDetial" size="tiny">
                <p><span class='replyTitle'>反馈内容 ：</span>{{msg}}</p>
                <p><span class='replyTitle'>回复内容 ：</span></p>
                <ul class="replyList" v-for='(item,index) in replyData'>
                    <li>{{item.createDate | formatDate}} | {{item.message}}</li>
                </ul>
                <span slot="footer" class="dialog-footer">
          <el-button @click="replyDetial = false">取 消</el-button>
          </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import {
        mapActions,
        mapState
    } from 'vuex'
    export default {
        data() {
            return {
                tableData: [],
                replyData: [],
                titleList: this.$store.state.feedbackManage.titleList,
                currentPage: 1,
                total: 0,
                dialogVisible: false,
                replyDetial: false,
                nullContent: false,
                nullContentPagination: true,
                msg: '111',
                replyContent: '',
                replyId: ''
            }
        },
        watch: {
            dialogVisible:function(val){
                if(val == false){
                    this.replyContent = '';
                }
            }
        },
        methods: {
            // 获取反馈列表
            getFeedBack(i) {
                this.$store.commit('showLoading');
                let list = {
                    token: sessionStorage.token,
                    pageNo: i,
                    pageSize: 10
                }
                this.getFeedBackList(list).then((data) => {
                    this.$store.commit('hiddenLoading');
                    console.log(data);
                    if (data.code === 200) {
                        this.total = data.data.count;
                        this.nullContent = false;
                        this.nullContentPagination = true;
                        if (data.data.list.length == 0) {
                            this.nullContent = true;
                            this.nullContentPagination = false;
                            this.tableData = data.data.list;
                            return;
                        }
                        this.tableData = data.data.list;
                    } else {
                        this.$message(data.message)
                    }
                }).catch(msg => console.log(msg));
            },
            // 打开信息内容
            openMsg(i) {
                let msg = this.tableData[i].comment;
                this.$alert(msg, '信息内容', {
                    confirmButtonText: '确定',
                });
            },
            // 回复消息内容
            replyMsg(i) {
                this.dialogVisible = true;
                this.msg = this.tableData[i].comment;
                this.replyId = this.tableData[i].id;
            },
            // 回复消息
            doReply() {
                this.$store.commit('showLoading');
                let list = {
                    token: sessionStorage.token,
                    backId: this.replyId,
                    message: this.replyContent
                }
                if (this.replyContent != '') {
                    this.replyFeedBack(list).then((data) => {
                        this.$store.commit('hiddenLoading');
                        console.log(data);
                        if (data.code === 200) {
                            this.$message.success('回复成功!')
                            this.getFeedBack(this.currentPage);
                        } else {
                             this.$message(data.message)
                        }
                    }).catch(msg => console.log(msg));
                    this.hideReply();
                } else {
                    this.$message.warning('请输入回复内容!')
                }
            },
            hideReply(){
                this.dialogVisible = false;
            },
            // 显示回复消息内容
            showDetialMsg(i) {
                this.replyDetial = true;
                let list = {
                    token: sessionStorage.token,
                    backId: this.tableData[i].id
                }
                this.msg = this.tableData[i].comment
                this.getDetialFeedBackMsg(list).then((data) => {
                    console.log(data);
                    if (data.code === 200) {
                        this.replyData = data.data.replyBack;
                    } else {
                        this.$message(data.message)
                    }
                }).catch(msg => console.log(msg));
            },
            // 分页跳转
            handleCurrentChange(val) {
                this.currentPage = val;
                this.getFeedBack(val);
            },
            ...mapActions(['getFeedBackList', 'replyFeedBack', 'getDetialFeedBackMsg'])
        },
        created: function() {
            this.getFeedBack(1);
        },
        filters: {
            // 格式化日期
            formatDate(date) {
                let y, m, d, h, i, s,
                    t = new Date(parseInt(date));
                y = t.getFullYear()
                m = t.getMonth() + 1
                d = t.getDate()
                h = t.getHours()
                i = t.getMinutes()
                s = t.getSeconds()
                return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d) + ' ' + (h < 10 ? '0' + h : h) + ':' + (i < 10 ? '0' + i : i) + ':' + (s < 10 ? '0' + s : s)
            },
            // 转换状态
            feedBack(val) {
                return val = val == '2' ? '是' : '否';
            }
        }
    }
</script>

<style scoped>
    #app {
        position: relative;
    }
    p,
    ul,
    h2,
    h4 {
        margin: 0;
    }
    h2 {
        text-align: center;
        color: rgb(109, 148, 189);
        border-bottom: 1px solid #ccc;
        padding: 10px 0 20px 0;
        font-size: 20px;
    }
    h4 {
        margin: 0;
        text-align: left;
        padding: 10px 0 10px 0;
        border-bottom: 1px solid #ccc;
    }
    .table-wraper {
        width: 100%;
        height: 100%;
        background-color: #fff;
    }
    .el-table {
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
    }
  
    .listTitle li:last-child,
    .dataList li:last-child {
        border-right: none;
    }
    .listTitle li:nth-child(1),
    .dataList li:nth-child(1) {
        width: 4%;
    }
    .listTitle li:nth-child(2),
    .dataList li:nth-child(2) {
        width: 11%;
    }
    .listTitle li:nth-child(3),
    .dataList li:nth-child(3) {
        width: 11%;
    }
    .listTitle li:nth-child(4),
    .dataList li:nth-child(4) {
        width: 8%;
    }
    .listTitle li:nth-child(5),
    .dataList li:nth-child(5) {
        width: 7%;
    }
    .listTitle li:nth-child(6),
    .dataList li:nth-child(6) {
        width: 7%;
    }
    .listTitle li:nth-child(7),
    .dataList li:nth-child(7) {
        width: 9%;
    }
    .listTitle li:nth-child(8),
    .dataList li:nth-child(8) {
        width: 16%;
    }
    .dataList li:nth-child(8) {
        padding: 0 5px;
        color:#35C885;
    }
    .listTitle li:nth-child(9),
    .dataList li:nth-child(9) {
        width: 6%;
    }
    .listTitle li:nth-child(10),
    .dataList li:nth-child(10) {
        width: 14%;
    }
    .listTitle li:nth-child(11),
    .dataList li:nth-child(11) {
        width: 7%;
    }
    .replyMassage {
        vertical-align: middle;
        cursor: pointer;
        color: #35C885;
    }
    .replyTitle {
        font-weight: bold;
        font-size: 15px;
    }
    p {
        text-align: left;
        padding: 10px 0;
    }
    .replyList {
        text-align: left;
        white-space: normal;
        word-break: break-all;
    }
</style>
